<template>
  <div class="diseaseNextDetail-container">
    <div class="ps">
      <span
        v-if="temperature && temperature.status === 2"
        style="padding-right: 20px;"
        >{{ temperature.data }}</span
      >
      <span v-else></span>
      带 * 的为必选项
      <span
        class="tip-btn"
        style="border-radius:10px;margin-right:10px;margin-left:10px"
        >单选</span
      ><span class="tip-btn">多选</span>
    </div>
    <div v-for="(item, index) in origin" :key="index" class="column">
      <div class="title">
        <span v-if="item.is_require === 1" class="must-check">*</span>
        <span v-else class="must-check no-content">*</span>
        {{ item.name }}
      </div>
      <div>
        <div v-for="(it, i) in item.data" :key="i" class="line">
          <div class="line-title">
            {{ it.name === '病情程度' ? '' : it.name }}
          </div>
          <div v-if="it.name !== '病情程度'" class="babyRadio-container">
            <div
              v-for="(oit, oi) in it.data"
              :key="oi"
              class="item"
              :class="{
                active: oit.is_checked === 1,
                mutipul: oit.is_single === 2,
                big: (oit.symptom_name || oit.type_detail).length > 5
              }"
              @click="toogle(item, it, oit)"
            >
              {{ oit.symptom_name || oit.type_detail }}
            </div>
          </div>
          <process v-else :current.sync="degree_id"></process>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="title">备注</div>
      <el-input
        v-model="remark"
        style="width:80%; margin-bottom: 8px;"
        type="textarea"
        :rows="3"
        placeholder="此处可输入宝宝的其他备注信息"
      >
      </el-input>
    </div>
    <div class="btn-box">
      <div class="submit-btn" @click="submit">提交</div>
    </div>
    <div
      v-if="showErrorMsg"
      class="special_dialog"
      @click="showErrorMsg = !showErrorMsg"
    >
      <div class="special_dialog_content">
        {{ error }}
      </div>
    </div>
  </div>
</template>
<script>
import process from './process';

export default {
  components: {
    process
  },
  props: {
    disease_id: {type: Number, default: 0},
    id: {},
    temperature: {data: '', status: 1}
  },
  data() {
    return {
      degree_id: 2,
      origin: [],
      tongues: {},
      remark: '',
      showErrorMsg: false,
      error: ''
    };
  },
  beforeMount() {
    if (this.id && this.disease_id) {
      this.getData();
    }
  },
  methods: {
    getData() {
      this.$http
        .post(this.$url.symptomsSymptom, {
          u_id: this.id,
          disease_id: this.disease_id
        })
        .then(res => {
          const newData = Object.keys(res).map(it => res[it]);
          newData.forEach(it => {
            it.data = Object.keys(it.data).map(item => it.data[item]);
          });
          this.origin = newData;
          const arr = newData
            .filter(it => it.name === '病情程度')[0]
            .data[0].data.filter(it => it.is_checked === 1);
          if (arr.length === 0) {
            this.degree_id = 0;
          } else {
            this.degree_id = arr[0].id;
          }
        })
        .catch(this.$catch);
    },
    toogle(item, it, oit) {
      if (oit.is_single === 1) {
        it.data.forEach(item => {
          if (item !== oit) {
            item.is_checked = 2;
          }
        });
      } else {
        const s = it.data.find(
          i => i.is_single === 1 && (i.symptom_name || i.type_detail) === '正常'
        );
        if (s) {
          s.is_checked = 2;
        }
      }
      oit.is_checked = oit.is_checked === 2 ? 1 : 2;
    },
    submit() {
      const origin = JSON.parse(JSON.stringify(this.origin));
      const res = origin.reduce((a, b) => {
        return a.concat(b.data);
      }, []);
      res.forEach(it => {
        it.data = it.data.filter(item => item.is_checked === 1);
      });
      const newRes = res.filter(it => it.data.length > 0);
      const result = {};
      newRes.forEach(it => {
        it.data.forEach(item => {
          if (item.type_id) {
            this.tongues[`tongue_${item.type_id}`] = item.id;
            return;
          }
          if (item.is_single === 1) {
            result[`${item.phenomenon_typeid}`] = item.id;
          } else if (result[`${item.phenomenon_typeid}`]) {
            result[`${item.phenomenon_typeid}`].push(item.id);
          } else {
            result[`${item.phenomenon_typeid}`] = [item.id];
          }
        });
      });
      const params = Object.assign({}, result, this.tongues, {
        u_id: this.id,
        disease_id: this.disease_id,
        degree_id: this.degree_id,
        remark: this.remark
      });
      this.$http
        .post(this.$url.postQuickDiagnose, params)
        .then(res => {
          this.$emit('next', {record_id: res.record_id}, 2);
          console.log(res);
        })
        .catch(err => {
          this.error = err.message;
          this.showErrorMsg = true;
          setTimeout(() => {
            this.showErrorMsg = false;
          }, 2000);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.diseaseNextDetail-container {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 20px 10px;
  position: relative;
  .ps {
    padding: 10px 0 20px;
    color: #ffb03e;
    font-size: 16px;
    font-weight: 700;
    .tip-btn {
      display: inline-block;
      padding: 0 10px;
      border: 1px solid #ffb03e;
    }
  }
  .btn-box {
    background-color: #fff;
    display: flex;
    justify-content: center;
    height: 140px;
    .submit-btn {
      line-height: 40px;
      text-align: center;
      width: 230px;
      height: 40px;
      border-radius: 20px;
      background-color: #ffb03e;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      margin-top: 20px;
      &.active {
        opacity: 0.5;
      }
    }
  }
  .column {
    background-color: #f2f6ff;
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 8px;
    font-size: 16px;
    padding-top: 10px;
    .title {
      position: relative;
      width: 167px;
      box-sizing: border-box;
      color: #4b90ff;
      padding-left: 20px;
      margin-top: -10px;
      font-weight: 700;
      flex-shrink: 0;
      .require {
        position: absolute;
        left: 2px;
        top: -4px;
        color: #dd331d;
      }
      .big-tip {
        color: #fff;
        background-color: red;
        padding: 5px 20px;
        border-radius: 5px;
        margin-left: 5px;
      }
    }
    .line {
      display: flex;
      align-items: center;
      &:last-child {
        margin-bottom: 0;
      }
      .line-title {
        color: #ffb03e;
        width: 90px;
        margin-top: -10px;
        margin-left: -70px;
        font-size: 16px;
        flex-shrink: 0;
      }
      .babyRadio-container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 25px;
          border-radius: 15px;
          box-sizing: border-box;
          border: 1px solid #b3b3b3;
          line-height: 30px;
          margin-right: 30px;
          margin-bottom: 18px;
          color: #333333;
          font-size: 16px;
          background-color: #fff;
          cursor: pointer;
          width: 90px;
          &.big {
            width: 210px;
          }
          &.active {
            background-color: #ffb03e;
            border: 1px solid #ffb03e;
            color: #fff;
          }
          &.mutipul {
            border-radius: 4px;
          }
        }
        .fixWidth {
          padding: 0;
        }
      }
    }
  }
  .special_dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 2;
    text-align: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    &_content {
      min-width: 420px;
      padding: 10px 15px;
      box-sizing: border-box;
      color: #606266;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
      border-radius: 5px;
    }
  }
}
</style>
